<template>
  <a-drawer
    class="my-search-drawer"
    title="查询"
    placement="right"
    :closable="false"
    :visible="drawerConfig.visible"
    @close="drawerConfig.visible = false">
    <my-search-form ref="drawerRef" :formList="formList" :initialValue="{batchName: '哈哈哈发生的发生的放松的方式'}">
      <template v-slot:batchName="{formState, item}">
        <a-form-item :label="item.label" :name="item.prop">
          <a-input
            v-model:value="formState.batchName"
            allow-clear
            :placeholder=" item.placeholder || '请输入' + item.label  "
            v-bind="item.meta || {}"/>
        </a-form-item>
        <a-input
          v-model:value="formState.otherName"
          allow-clear
          :placeholder=" item.placeholder || '请输入其它名称' "
          v-bind="item.meta || {}"/>
      </template>
    </my-search-form>
    {{ testItem }}
    <template v-slot:footer>
      <a-space class="rewrite-space">
        <a-button block type="primary" @click="doit">查询</a-button>
        <a-button block @click="reset">重置</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script>
import { ref } from 'vue'
import mySearchForm from '@/basicComponents/mySearchForm'
export default {
  components: {mySearchForm},
  props: {
    drawerConfig: {
      type: Object,
      default: () => ({
        visible: false,
        closable:() => {}
      })
    },
    testItem: {
      type: Object,
      default: () => ({})
    }
  },
  setup() {

    const drawerRef = ref(null)

    const doit = () => {
      console.log(drawerRef)
      drawerRef.value.validate(formState => {
        console.log(formState)
      })
      // drawerRef.value.formConfig.formState.money = 5
    }

    const reset = () => {
      drawerRef.value.resetFields()
    }


    const formList = [
      {
        type: 'slot',
        prop: 'batchName',
        label: '批次工程名称',
        span: 24,
        defaultValue: '我是批次工程',
        required:true,
        meta: {
          'allow-clear': false
        },
        validate: {
          required: true,
          fn: function({ formState }, rule, value, callback){
            if( !value ) return Promise.reject('批次工程名称为必须项')
            if( value.length > 9 ) return Promise.reject('长度不能超过 9 位')
            return Promise.resolve()
          }
        }
      },
      {
        type: 'input',
        prop: 'name',
        label: '单项工程名称',
        span: 24,
        meta: {
          'allow-clear': false
        },
        validate: {
          required: true,
          fn: async function({ formState }, rule, value, callback){
            console.log(value, !value,'  ---------------  ')
            if( !value ) return Promise.reject('单项工程名称为必须项')
            if( value.length > 9 ) return Promise.reject('长度不能超过 9 位')
            return Promise.resolve()
          }
        }
      },
      {
        type: 'select',
        prop: 'region',
        label: '批次类型',
        required:true,
        options: [
          { dicLabel: '北京', dicValue: '1' },
          { dicLabel: '上海', dicValue: '2' }
        ]
      },
      {
        type: 'checkbox-group',
        prop: 'books',
        label: '喜欢的书',
        validate: {
          // fn: function({ formState }, rule, value, callback){
          //   return Promise.resolve()
          // },
          // min: 3,
          // max: 5,
          // type: 'array',
          required: true,
          // message: 'Please select at least one activity type',
          // trigger: 'change',
        },
        options: [
          { dicLabel: '红楼梦', dicValue: '1' },
          { dicLabel: '狂人日记', dicValue: '2' },
          { dicLabel: '百草园', dicValue: '3' },
          { dicLabel: '铸剑', dicValue: '4' },
          { dicLabel: '刘德华', dicValue: '5' },
        ]
      },
      {
        type: 'checkbox',
        prop: 'isTouyun',
        label: '是否投运',
        validate: {
          required: true
        }
      },
      {
        type: 'select',
        prop: 'type',
        label: '专变类型',
        options: 'PRO_BELONG_TYPE'
      },
      {
        type: 'input-number',
        prop: 'money',
        label: '金额'
      },
      {
        type: 'radio',
        prop: 'fruit',
        label: '喜欢的水果',
        options: [
          { dicLabel: '苹果', dicValue: '1' },
          { dicLabel: '香蕉', dicValue: '2' },
          { dicLabel: '橘子', dicValue: '3' },
          { dicLabel: '桃子', dicValue: '4' },
        ]
      },
      {
        type: 'select',
        prop: 'type333',
        label: '城农网',
        options: 'urban_rural_network'
      },
      {
        label: '附件',
        type: 'upload',
        prop: 'attach',
        meta: {
          limit: 2
        }
      },
      {
        label: '机构',
        type: 'orgId',
        prop: 'orgId',
        meta: {
          changeOnSelect: true
        }
      },
      {
        type: 'cascader',
        prop: 'isQs',
        label: '所属单位',
        validate: {
          required: true
        },
        options: [{
          value: '浙江',
          label: '浙江',
          children: [{
            value: '广州',
            label: '广州',
            children: [{
              value: '西湖',
              label: '西湖',
            }],
          }],
        }, {
          value: '江苏',
          label: '江苏',
          children: [{
            value: '南京',
            label: '南京',
            children: [{
              value: '苏州',
              label: '苏州',
            }],
          }],
        }]
      },
      {
        type: 'tree-select',
        prop: 'treeId',
        label: '供电所',
        options: [{
          title: '湖南省公司',
          value: '1',
          children: [{
            title: '湖南长沙供电中心',
            value: '2',
            children: [{
              title: '长沙县供电中心',
              value: '3',
            }, {
              title: '雨花区供电中心',
              value: '4',
            }],
          }, {
            title: '天心区供电中心',
            value: '5',
          }],
        }]
      }
    ]


    return {
      doit,
      formList,
      drawerRef,
      reset
    }
  }
}
</script>

<style scoped lang="less">
.my-search-drawer{
  .rewrite-space{
    width:100%;
    /deep/.ant-space{
      width: 100%;
    }
    /deep/.ant-space-item{
      width: 50%;
    }
  }
}
</style>
